<template>
  <div>
    <div>
      <!-- 权益卡名称 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          权益卡名称：
        </div>
        <el-input placeholder="请输入卡名称" style="width: 25%" />
      </div>
      <!-- 卡有效期 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">
          <span>*</span>
          卡有效期：
        </div>
        <!-- 卡有效期单选组 -->
        <el-radio-group class="flex_direction">
          <el-radio label="not">永久有效</el-radio>
          <el-radio
            class="flex_y_center"
            label="order_amount"
            style="margin: 10px 0"
          >
            领卡时起
            <el-input style="width: 20%" />
            天内有效
          </el-radio>
          <!-- 满件减 -->
          <el-radio label="order_num">
            <el-date-picker
              format="yyyy-MM-dd"
              placeholder="选择开始日期"
              type="date"
              value-format="yyyy-MM-dd"
            />
            至
            <el-date-picker
              format="yyyy-MM-dd"
              placeholder="选择结束日期"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 领取设置 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">领取设置：</div>
        <el-radio-group class="flex_direction">
          <el-radio label="not">可直接领取</el-radio>
          <el-radio label="order_amount" style="margin-top: 10px">
            需付费购买
          </el-radio>
          <el-table :data="a">
            <el-table-column label="金额">
              <template slot-scope="scope">
                <el-input v-model="scope.row.e">
                  <template slot="prepend">￥</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="库存">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.e" />
              </template>
            </el-table-column>
            <el-table-column label="规格编码">
              <template slot-scope="scope">
                <el-input v-model="scope.row.e" />
              </template>
            </el-table-column>
          </el-table>
          <!-- 满件减 -->
          <el-radio label="order_num" style="margin-top: 10px">
            <el-date-picker
              format="yyyy-MM-dd"
              placeholder="选择开始日期"
              type="date"
              value-format="yyyy-MM-dd"
            />
            至
            <el-date-picker
              format="yyyy-MM-dd"
              placeholder="选择结束日期"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 使用须知 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">
          <span>*</span>
          使用须知：
        </div>
        <el-input
          placeholder="请输入卡名称"
          style="width: 40%"
          type="textarea"
        />
      </div>
      <!-- 权益 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">权益：</div>
        <el-checkbox-group
          v-model="equityForm.equity_item"
          class="flex_direction"
        >
          <el-checkbox label="包邮">包邮</el-checkbox>
          <el-checkbox class="flex_y_center" label="消费折扣">
            消费折扣
            <el-input placeholder="请输入消费折扣" style="width: 60%">
              <template slot="append">折</template>
            </el-input>
          </el-checkbox>
          <el-checkbox label="积分回馈倍率">
            积分回馈倍率
            <el-input placeholder="请输入积分回馈倍率" style="width: 60%">
              <template slot="append">倍</template>
            </el-input>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 协议确认 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">
          <span>*</span>
          协议确认：
        </div>
        <div style="width: 70%">
          <el-checkbox label="true">
            <a href="">《权益卡使用协议》</a>
            是你提供给消费者的承诺，勾选后即表示同意协议中的所有条款。
          </el-checkbox>
        </div>
      </div>
      <!-- 关闭，保存按钮 -->
      <div class="flex_between">
        <div></div>
        <div>
          <el-button @click="$emit('send')">取消</el-button>
          <el-button type="primary" @click="addCoupon">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      oEquityCardInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        equityForm: {
          id: '',
          equity_name: '', // 权益卡名称
          equity_item: [],
        },
      }
    },
    methods: {
      // 添加权益卡
      addCoupon() {},
    },
  }
</script>

<style scoped>
  .flex_direction {
    display: flex;
    flex-direction: column;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
  .inp_title {
    width: 25%;
    text-align: right;
  }
  span {
    color: red;
  }
  ::v-deep .el-checkbox__input {
    display: inline-grid;
    white-space: pre-line;
    word-wrap: break-word;
    overflow: hidden;
    line-height: 20px;
  }
</style>
